<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会基本信息设置
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">各组竞赛项目</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="gr-card">
            <div class="card_top">
                <div>
                    <el-form>
                        <el-form-item label="组别：">
                            <el-select v-model="grgroup" class="card_sel">
                                <el-option v-for="(item, index) in selgroup" :key="index + 1" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="btn_rt3">
                    <el-button type="success" @click="selectAllValues(grgroup)">全部设定</el-button>
                    <el-button type="success" @click="clearColumnValue(grgroup)">清除设定</el-button>
                    <el-tooltip class="item" effect="dark" content="包含其他设置值" placement="right-end">
                        <el-checkbox class="col-check" v-model="checked"></el-checkbox>
                    </el-tooltip>
                </div>
            </div>

            <el-table highlight-current-row :data="greData" border @row-click="handleRowClick">
                <el-table-column prop="msidName" label="项目">
                </el-table-column>
                <el-table-column prop="sflag" label="设定">
                    <template #default="scope">
                        {{ scope.row.sflag === 1 ? '√' : ' ' }}
                    </template>
                </el-table-column>
                <el-table-column prop="sotName" label="编排模式">
                </el-table-column>
                <!-- <el-table-column label="单项名次">
                    <template #default="scope">
                        {{ scope.row.grank === 0 ? '' : scope.row.grank }}
                    </template>
                </el-table-column>
                <el-table-column label="不足减几">
                    <template #default="scope">
                        {{ scope.row.gminus === 0 ? '' : scope.row.gminus }}
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 修改页面 -->
            <el-dialog title="修改" v-model="editdialogVisible" draggable width="40%" :before-close="handleClose">
                <el-form :model="editfrom" label-width="90">
                    <el-form-item label="比赛项目：">
                        <span>{{ editfrom.msidName }}</span>
                    </el-form-item>
                    <el-form-item label="使用设定：">
                        <el-checkbox v-model="editgsx" @change="editleCheckboxChange"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="编排模式：">
                        <el-select v-model="editfrom.sotName">
                            <el-option v-for="(item, index) in orcmode" :key="index" :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="单项名次：">
                        <el-input v-model="editfrom.grank"></el-input>
                    </el-form-item>
                    <el-form-item label="不足减几：">
                        <el-input v-model="editfrom.gminus"></el-input>
                    </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editGroupveninfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selgroup: [],
            greData: [],
            orcmode: [],
            grgroup: 1,
            checked: false,
            editdialogVisible: false,
            editfrom: {
                msidName: '',
                sflag: null,
                sotName: '',
                grank: null,
                gminus: null
            },
            editgsx: false,
            tableline: {},
        }
    },
    created() {
        this.postEventinfoList(this.grgroup);
        this.getGroupinfoList();
        this.postOrcModeinfoList();
    },
    methods: {
        // 查询
        async getGroupinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
            if (result.data.code == 0) {
                this.selgroup = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },

        async postEventinfoList(grid) {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/gEvent/getmsg', { params: { grid: grid } });
                if (result.data.code == 0) {
                    this.greData = result.data.data
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async postOrcModeinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/contest/getOrcMode');
            if (result.data.code == 0) {
                this.orcmode = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
            this.editgsx = this.editfrom.sflag === 1;
        },
        editleCheckboxChange(newValue) {
            this.editfrom.sflag = newValue ? 1 : 0;
        },
        //修改
        async editGroupveninfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/gEvent/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.postEventinfoList(this.grgroup);
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.postEventinfoList(this.grgroup);
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.postEventinfoList(this.grgroup);
        },
        handleClose(done) {
            this.postEventinfoList(this.grgroup);
            done()
        },
        // 获取某一行数据
        handleRowClick(row) {
            this.tableline = row
        },
        // 全部设定
        async selectAllValues(val) {
            if (this.checked === false) {
                const result = await this.$http.post(this.BACKEND_URL + '/gEvent/updateSflag', { grid: val })
                if (result.data.code == 0) {
                    this.$message.success('设定成功')
                    this.postEventinfoList(this.grgroup);
                } else if (result.data.code == 500) {
                    this.$message.error('设定失败')
                    console.log(result.data.msg)
                }
            } else {
                const result = await this.$http.post(this.BACKEND_URL + '/gEvent/updateAllMsg', this.tableline)
                if (result.data.code == 0) {
                    this.postEventinfoList(this.grgroup);
                } else {
                    this.$message.error('请选择一条数据进行设置')
                }
            }
        },
        // 清除设定
        async clearColumnValue(val) {
            const result = await this.$http.post(this.BACKEND_URL + '/gEvent/clearAll', { grid: val })
            if (result.data.code == 0) {
                this.postEventinfoList(this.grgroup);
                this.$message.success('已清除设定')
            } else if (result.data.code == 500) {
                this.$message.error('清除失败')
                console.log(result.data.msg)
            }
        },
    },
    watch: {
        grgroup(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.postEventinfoList(newGroupName);
            }
        }
    },
}
</script>

<style lang="less" scoped>
:deep(.cell) {
    text-align: center;
}

.gr-card {
    margin-top: 15px;
}

.card_top {
    display: flex;
}

.card_sel {
    width: 150px;
}

.btn_rt3 {
    margin-left: 15px;
}

:deep(.el-checkbox) {
    height: auto;
}

.col-check {
    margin-left: 15px;
}

.cosp4 {
    margin-left: 15px;
    text-align: left;
}
</style>